<template>
	<view>
		<input v-model="ipt" @confirm="query" type="text" />
		<view class="items">
			<navigator
				:url="`/pages/detail/detail?id=${item.heroId}`"
				v-for="item in heros"
				class="item"
			>
				<!-- v-bind:src :src -->
				<image :src="item.icon" mode="" />
				<text>{{ item.name }}</text>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	/**
	 * 1. 默认数据
	 * 2. 搜索: v-model @confirm
	 * 3. 详情
	 * 4.详情数据
	 *
	 */
	const heros = ref([])
	const getHeros = async (q = '') => {
		const res = await uni.request({
			url: 'https://api-vue-base.itheima.net/api/lol/search',
			method: 'get',
			data: {
				q,
			},
		})

		console.log(res)
		heros.value = res.data.data
	}
	getHeros()

	// 搜索
	const ipt = ref('')
	const query = () => {
		getHeros(ipt.value)
	}
</script>

<style>
	input {
		width: 100%;
		background-color: skyblue;
		height: 100rpx;
	}
	.items {
		display: flex;
		flex-wrap: wrap;
	}
	.item {
		width: 25%;
		height: 280rpx;
		background: orange;
	}
	.item image {
		width: 100%;
		height: 200rpx;
	}
	.item text {
		display: block;
		text-align: center;
	}
</style>
